
//li={img_span:xxx,imgPath:xxx,img_title:xxx,h3:xxx,p:xxx,watch_img:xxx,watch_text:xxx}
//lis=[li01,li02,li03];
//{container:xxx,lis:xxx,width:xxx,height:xxx}

function createComponent(obj){
	var container = $(obj.container);
	var lis = obj.lis;
	var width = obj.img_width;
	var height = obj.img_height;
	
	for(var i = 0; i < lis.length; i++){
		var box = $("<li></li>").css({"cursor":"pointer","color":"#333","list-style":"none","width":width+"px"});
		box.on("mousemove",function(){
			$(">div>img",this).css("transform","scale(1.1)");
			if($(">h3",this).size()>0){
				$(">h3",this).css("color","#55A532");
			}
		});
		box.on("mouseleave",function(){
			$(">div>img",this).css("transform","scale(1)");
			if($(">h3",this).size()>0){
				$(">h3",this).css("color","#333");
			}
		});

		var img_div = $("<div class='img_div'></div>").css({"width":width+"px",
			"height":height+"px","position":"relative","overflow":"hidden",
			"box-shadow":"0px 2px 2px #ccc"});
		if(lis[i].img_span&&lis[i].img_span!=""){
			var img_span = $("<span>"+lis[i].img_span+"</span>").css({"display":"block",
			"font-size":"14px","padding":"5px","color":"white","background-color":"#dd8700",
			"position":"absolute","z-index":"5","top":"0","left":"0"}).appendTo(img_div);
		}
		var img = $("<img src='"+lis[i].imgPath+"'></img>").css({"width":width+"px",
		"height":height+"px","transition":"all 0.5s"}).appendTo(img_div);
		if(lis[i].img_title&&lis[i].img_title!=""){
			var img_title = $("<p>"+lis[i].img_title+"</p>").css({"padding-left":"5px",
			"box-sizing":"bprder-box","width":width+"px","font-size":"14px",
			"color":"white","background-color":"rgba(0,0,0,0.6)","position":"absolute",
			"bottom":"0","left":"0"});
			img_div.append(img_title);
		}
		box.append(img_div);
		
		if(lis[i].h3&&lis[i].h3!=""){
			var h3 = $("<h3>"+lis[i].h3+"</h3>").css({"margin-top":"1em",
			"line-height":"1em","font-size":"14px","font-weight":"500"});
			box.append(h3);
		}
		
		if(lis[i].p&&lis[i].p!="") {
			var p = $("<p>"+lis[i].p+"</p>").css({"margin-top":"0.75em",
			"line-height":"1.6em","font-size":"12px","color":"#999999"});
			box.append(p);
		}
		
		if(lis[i].watch_img&&lis[i].watch_img!=""){
			var watch_span = $("<span>"+lis[i].watch_text+"</span>").css({"display":"block",
			"margin-top":"5px","padding-left":"15px","color":"#999999",
			"font-size":"12px","background":"url(img/viewCountIcon.png) no-repeat 0px 5px"});
			box.append(watch_span);
		}
		
		container.append(box);
	}
	
}
